const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('/a.html', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.get('/b.html', (req, res) => {
  const renderer = require('vue-server-renderer').createRenderer({
    template: require('fs').readFileSync('./index.template.html', 'utf-8')
  })
  const context = {
    title: 'hello',
    meta: `
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="description" content="">
      <meta name="generator" content="GitBook 3.2.3">
    `
  }
  const app = new Vue({
    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount')
    },
    mounted() {
      console.log('mounted');
    },
    data: {
      url: req.url,
      value: ''
    },
    template: `<div><input v-model="value"></input>{{ value }}</div>`
  })
  renderer.renderToString(app, context, (err, html) => {
    console.log(err);
    res.end(html)
  })
})
server.listen(8080)